<template>
  <basic-container>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table">
      <div slot="filter">
        <el-form class="fl mb-15" :inline="true">
          <!-- <el-form-item label="渠道">
            <XmSelect
              filterable
              clearable
              v-model="params.channelKey"
              placeholder="请选择渠道"
              size="medium"
              :options="channelList"
            >
            </XmSelect>
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              @click="search"
              size="medium"
              plain
              icon="el-icon-search"
            >刷新</el-button>
          </el-form-item>
        </el-form>
        <div class="fr">
          <el-button icon="el-icon-plus" size="medium" type="danger" @click="add">新增</el-button>
        </div>
      </div>

      <template slot="column-channelKey" slot-scope="{data}">
        {{getChannelText(data)}}
      </template>
      <template slot="column-tag" slot-scope="{data}">
        <span class="c-red">{{wordTagTypeMap[data.tag] || '-'}}</span>
      </template>
      <template slot="column-state" slot-scope="{data}">
        <el-tag size="small" :type="data.state === 1 ? 'success' : 'danger'">
          {{data.state === 1 ? '启用' : '关闭'}}
        </el-tag>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button class="edit-btn" type="text" @click="edit(data)">
          编辑
        </el-button>
        <el-button type="text" @click="remove(data)">
          删除
        </el-button>
      </template>
    </XmTable>
    <addDialog ref="addDialog" :channelList="channelList" @submit="onSubmit"></addDialog>
    
  </basic-container>
</template>

<script>
import tableConfig from './config/table'
import {
  getOrderChannelList, // 渠道
} from "@/api/createOrder";
import addDialog from './components/addDialog'
import { removeWord } from '@/api/maintainData/word'
import { wordTagTypeMap } from '@/const'
export default {
  data() {
    return {
      tableConfig,
      noWatchParams: {
        tag: '4,5,6,7,8'
      },
      channelList: [],
      form: {},
      wordTagTypeMap
    }
  },
  methods: {
    getOrderChannelList() {
      getOrderChannelList({parentId: 1}).then(res => {
        const list = res.data.data || []
        list.unshift({
          channelName: '所有渠道',
          channelKey: '0',
        })
        this.channelList = list.map(item => {
          return {
            ...item,
            label: item.channelName,
            value: item.channelKey,
          }
        })
      })
    },
    getChannelText(data) {
      const c = this.channelList.find(item => item.channelKey == data.channelKey)
      return c ? c.channelName : '-'
    },
    search() {
      this.$refs.table.fetch()
    },
    add() {
      this.$refs.addDialog.show({type: 'add'})
    },
    edit(data) {
      this.$refs.addDialog.show({type: 'edit', data})
    },
    remove(data) {
      this.$confirm('请确认是否删除该记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeWord({ids: data.id}).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.search()
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        })
      })
    },
    onSubmit() {
      this.search()
    }
  },
  created() {
    this.getOrderChannelList()
  },
  components: {
    addDialog
  }
}
</script>

<style lang="scss" scoped>
.table {
  .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
